<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="员工姓名" id="name">
<input type="text" placeholder="工资" id="sal">
<input type="text" placeholder="工作" id="job">
<input type="button" value="添加">
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>工作</th>
    </tr>
</table>
<script src="../jq.js"></script>
<script>
    //准备一个数组装着三个员工的信息
    let arr = [{name: "刘备", sal: 2000, job: "程序员"},
        {name: "刘备", sal: 3000, job: "销售"},
        {name: "刘备", sal: 4000, job: "人事"}]
    //遍历数组往页面中添加tr和td的组合
    for (let i= 0;i<arr.length;i++){
        let emp = arr[i];
        //把员工信息显示到页面中
        addEmp(emp)
    }

    $("input:eq(3)").click(function () {
        let emp ={}
        emp.name =$("input:eq(0)").val()
        emp.sal =$("input:eq(1)").val()
        emp.job =$("input:eq(2)").val()
        addEmp(emp)
    })

    function addEmp(emp) {
        let tr = $("<tr></tr>")
        let name = $("<td></td>")
        let sal = $("<td></td>")
        let job = $("<td></td>")
        let del = $("<td><input type='button' value='删除' </td>")

        del.children().click(function () {
            //删除当前行
            tr.remove();
        })
        name.text(emp.name)
        sal.text(emp.sal)
        job.text(emp.job)

        tr.append(name)
        tr.append(sal)
        tr.append(job)
        tr.append(del)

        $("table").append(tr);
    }
</script>
</body>
</html>